import React, { useEffect, useRef, useState } from "react";
import "@grapecity/spread-sheets-resources-zh";
import "@grapecity/spread-sheets-designer-resources-cn";
import * as GC from "@grapecity/spread-sheets";
import { Designer } from "@grapecity/spread-sheets-designer-react";
import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
import { Button, Modal } from "antd";
import "antd/dist/antd.css";

GC.Spread.Common.CultureManager.culture("zh-cn");
export default () => {
  const [visible, setVisible] = useState(false);
  return (
    <>
      <Button onClick={() => setVisible(true)}>设计</Button>
      <Modal
        visible={visible}
        width="80%"
        onCancel={() => setVisible(false)}
        center
      >
        <Designer
          styleInfo={{ width: "100%", height: "900px" }}
        />
      </Modal>
    </>
  );
};
